<!--
*
* Copyright 2015 HISP Tanzania
*
* This program is free software; you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation; either version 2 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program; if not, write to the Free Software
* Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston,
* MA 02110-1301, USA.
*
* @since 2015
* @author Joseph Chingalo profschingalo@gmail.com>
*
*
-->
<span *ngIf="loadingSize && loadingSize == 'small'">

  <svg width='22px' height='22px' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="uil-balls">
    <rect x="0" y="0" width="100" height="100" fill="none" class="bk"></rect>
    <g transform="rotate(0 50 50)">
      <circle r="5" cx="30" cy="50">
        <animateTransform attributeName="transform" type="translate" begin="0s" repeatCount="indefinite" dur="0.5s" values="0 0;29.999999999999996 -17.320508075688775"
          keyTimes="0;1" />
        <animate attributeName="fill" dur="0.5s" begin="0s" repeatCount="indefinite" keyTimes="0;1" values="#c5523f;#f2b736" />
      </circle>
    </g>
    <g transform="rotate(120 50 50)">
      <circle r="5" cx="30" cy="50">
        <animateTransform attributeName="transform" type="translate" begin="0s" repeatCount="indefinite" dur="0.5s" values="0 0;29.999999999999996 -17.320508075688775"
          keyTimes="0;1" />
        <animate attributeName="fill" dur="0.5s" begin="0s" repeatCount="indefinite" keyTimes="0;1" values="#f2b736;#499255" />
      </circle>
    </g>
    <g transform="rotate(240 50 50)">
      <circle r="5" cx="30" cy="50">
        <animateTransform attributeName="transform" type="translate" begin="0s" repeatCount="indefinite" dur="0.5s" values="0 0;29.999999999999996 -17.320508075688775"
          keyTimes="0;1" />
        <animate attributeName="fill" dur="0.5s" begin="0s" repeatCount="indefinite" keyTimes="0;1" values="#499255;#c5523f" />
      </circle>
    </g>
  </svg>

</span>
<div text-center *ngIf="loadingSize && loadingSize == 'large'">

  <svg width='140px' height='140px' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid"
    class="uil-balls">
    <rect x="0" y="0" width="100" height="100" fill="none" class="bk"></rect>
    <g transform="rotate(0 50 50)">
      <circle r="5" cx="30" cy="50">
        <animateTransform attributeName="transform" type="translate" begin="0s" repeatCount="indefinite" dur="0.5s" values="0 0;29.999999999999996 -17.320508075688775"
          keyTimes="0;1" />
        <animate attributeName="fill" dur="0.5s" begin="0s" repeatCount="indefinite" keyTimes="0;1" values="#c5523f;#f2b736" />
      </circle>
    </g>
    <g transform="rotate(120 50 50)">
      <circle r="5" cx="30" cy="50">
        <animateTransform attributeName="transform" type="translate" begin="0s" repeatCount="indefinite" dur="0.5s" values="0 0;29.999999999999996 -17.320508075688775"
          keyTimes="0;1" />
        <animate attributeName="fill" dur="0.5s" begin="0s" repeatCount="indefinite" keyTimes="0;1" values="#f2b736;#499255" />
      </circle>
    </g>
    <g transform="rotate(240 50 50)">
      <circle r="5" cx="30" cy="50">
        <animateTransform attributeName="transform" type="translate" begin="0s" repeatCount="indefinite" dur="0.5s" values="0 0;29.999999999999996 -17.320508075688775"
          keyTimes="0;1" />
        <animate attributeName="fill" dur="0.5s" begin="0s" repeatCount="indefinite" keyTimes="0;1" values="#499255;#c5523f" />
      </circle>
    </g>
  </svg>

  <div *ngIf="loadingMessage">
    <span [translate]="loadingMessage">{{loadingMessage}}</span>
  </div>


</div>
